/* 之所以会用到下面的那个函数getOffset（obj）
 * 是因为event.touches[0].pageX、pageY获取的是相对于可视窗口的距离
 * 而lineTo画笔的定位是根据画布位置定位的
 * 所以就要先获取到画布(canvas)相对于可视窗口的距离，然后计算得出触摸点相对于画布的距离
 * */

/**
 * 获取该元素到顶部/左侧的距离
 * 注：此函数必须在文档加载完才能计算准确，否则有些图片未加载完成尺寸会计算不准确
 * @param el
 */
export function getOffset(el: HTMLElement) {
  let valLeft = 0,
    valTop = 0;

  function getPosition(obj: HTMLElement) {
    valLeft += obj.offsetLeft;
    valTop += obj.offsetTop;
    /* 不到最外层就一直调用，直到offsetParent为body*/
    if (obj.offsetParent) {
      getPosition(<HTMLElement>obj.offsetParent);
    }
    return [valLeft, valTop];
  }

  return getPosition(el);
}

/**
 * 获取该元素到顶部/左侧的距离
 * 但是在 vue 中，有可能监听不到 window.onload 事件
 * @param el
 */
export function getOffsetWithPromise(el: HTMLElement): Promise<number[]> {
  return new Promise((resolve) => {
    window.addEventListener("load", () => resolve(getOffset(el)));
  });
}
